<template>
	<view class="container">
		<view class="contant">
			<u--form :labelStyle="{color:'#333333',fontSize:'30rpx'}" ref="uForm" labelWidth="auto" labelAlign="left">
				<u-form-item label="预约人姓名:" prop="name" borderBottom>
					<u--input v-model="info.name" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="预约人手机号:" prop="phone" borderBottom>
					<u--input v-model="info.phone" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="预约服务编号:" prop="phone" borderBottom>
					<u--input v-model="info.type" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="预约服务名称:" prop="phone" borderBottom>
					<u--input v-model="info.typeLabel" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="价格:" prop="phone" borderBottom>
					<u--input v-model="info.price" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="备注:" prop="remark">
					<u--input v-model="info.remark" readonly border="none"></u--input>
				</u-form-item>
				<u-form-item label="支付状态:" prop="remark" v-if="info.paystatus==2">
					<u--input v-model="info.paystatusText" readonly border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="tips">
			权益编码用于查询或取消
		</view>
		<view class="footer">
			<!-- 	<view class="submit" style="background:#FF7F36" @click="reschedule(0)"
				v-if="info.status==2&&info.paystatus!=2">{{rescheduleLoading?'处理中...':'重新预约'}} </view> -->
			<view class="submit" style="background:#FF7F36" @click="jumpWebView(info.useurl)"
				v-if="info.status==1&&info.useurl">查看</view>
			<view class="submit" @click="payment" v-if="info.status==0">{{payLoading?'处理中...':'预约'}}</view>
			<view v-if="availableEquityNum==1">
				<view class="submit" @click="cancel" v-if="info.paystatus==1">
					{{editLoading?'处理中...':info.paystatus==2?'已退款':'退款'}}
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	import {
		imgUrl,
		miniPay
	} from '../../utils/global';
	import {
		getcxinfo,
		travelPay,
		grantEquity,
		editcx,
		TravelPayrefund,
		equityChangeState,
		setcx,
		equityDetailList
	} from "@/api/travel"
	import {
		useUserStore
	} from '@/store/user';
	const userStore = useUserStore();
	const id = ref("")
	const info = ref({})
	onLoad(async (options) => {
		id.value = options.id
		// getInfo()
	})
	const availableEquityNum = ref(0)
	onShow(() => {
		getInfo()
	})
	const handleType = (status) => {
		switch (status) {
			case "E0807000001":
				return "休息室服务";
			case "E0807000002":
				return "机场贵宾服务";
			case "E0807000003":
				return "礼宾车接送服务";
			case "E0907003001":
				return "境内机场高铁休息室服务";
			case "E0907003002":
				return "境外机场休息室";
			case "E0907003003":
				return "境内接送机站服务";
			case "E0907003004":
				return "贵宾要客通服务";
			default:
				return "获取失败";
		}
	};
	// 获取详情
	const getInfo = () => {
		if (!id.value) {
			uni.$u.toast("缺少id信息")
			return
		}
		getcxinfo({
			id: id.value
		}).then(res => {
			if (res.remark == "null" || res.remark == "") {
				res.remark = "无"
			}
			res.paystatusText = res.paystatus == 2 ? '已退款' : ''
			res.typeLabel = handleType(res.type)
			info.value = res
			if (res.status == 1 || res.status == 2) {
				numberRights()
			}
		})
	}
	// 获取可使用权益数量
	const numberRights = () => {
		equityDetailList({
			equityCode: info.value.type,
			payno: info.value.payno,
			phone: info.value.phone
		}).then(res => {
			let list = res?.dataList
			if (!list) return
			let detail = list.find(item => item.equityCode == info.value.equitycode)
			availableEquityNum.value = detail.availableEquityNum
			console.log(availableEquityNum.value, "availableEquityNum")
		})
	}
	const payLoading = ref(false)
	// 支付
	const payment = () => {
		if (payLoading.value) return
		payLoading.value = true
		if (info.value.status == 0 && info.value.paystatus == 1) {
			editStatus(1)
			return
		}

		travelPay({
			payno: info.value.payno,
			price: info.value.price,
			uid: info.value.uid,
		}).then(pay_res => {
			miniPay(pay_res).then(result => {
				paymentNext()
			}).catch(err => {
				payLoading.value = false
				uni.$u.toast("editcx调用失败")
			})
		}).catch(err => {
			payLoading.value = false
			// if (err.includes("该订单已支付")) {
			// 	paymentNext()
			// } else {
			// 	payLoading.value = false
			// }
		})
	}
	const editLoading = ref(false)
	// 取消预约
	const cancel = () => {
		if (info.value.paystatus == 2) return
		if (editLoading.value) return
		uni.showModal({
			title: '退款',
			content: '你确定要退款吗?',
			cancelText: '返回',
			confirmText: '确认',
			success: async (res) => {
				if (res.confirm) {
					editLoading.value = true
					// 未使用退款
					if (availableEquityNum.value == 1) {
						let state = await changeEquityState(4)
						if (!state) {
							return
						}
						TravelPayrefund({
							payno: info.value.payno,
							price: info.value.price
						}).then(result => {
							if (info.value.status == 1) {
								setcx({
									id: info.value.id,
									status: 2
								}).then(res => {
									cancelSuccess()
								}).catch(err => {
									editLoading.value = false
								})
								return
							}
							cancelSuccess()
						}).catch(err => {
							editLoading.value = false
						})
					} else if (availableEquityNum.value == 0) {
						let state = await changeEquityState(2)
						if (!state) {
							return
						}
						TravelPayrefund({
							payno: info.value.payno,
							price: info.value.price
						}).then(result => {
							cancelSuccess()
						}).catch(err => {
							editLoading.value = false
						})
					}
				}
			},
		});
	}
	// 修改状态
	const changeEquityState = async (opState) => {
		return equityChangeState({
			opState,
			equityCouponCode: info.value.eqcode
		}).then(() => {
			return true
		}).catch(err => {
			editLoading.value = false
			return false
		})
	}
	// 取消预约成功后的封装
	const cancelSuccess = () => {
		uni.showToast({
			title: "退款申请已提交",
			icon: "none"
		})
		info.value.paystatus = 2
		setTimeout(() => {
			uni.redirectTo({
				url: "/pages/travel/list"
			})
			editLoading.value = false
		}, 1000)
	}
	const rescheduleLoading = ref(false)
	const reschedule = () => {
		if (rescheduleLoading.value) return
		rescheduleLoading.value = true
		editStatus(0)
	}
	// 修改出行状态
	const editStatus = (status) => {
		setcx({
			id: info.value.id,
			status
		}).then(res => {
			if (status == 0) {
				uni.redirectTo({
					url: "/pages/travel/list"
				})
				rescheduleLoading.value = false
			}
			if (status == 1) {
				uni.$u.toast("处理成功")
				setTimeout(() => {
					jumpWebView(info.value.useurl)
					payLoading.value = false
				}, 1000);
			}
		}).catch(err => {
			payLoading.value = false
			rescheduleLoading.value = false
			console.log("修改出错")
		})
	}
	const jumpWebView = (useUrl) => {
		console.log(encodeURIComponent(useUrl), "asdasd")
		uni.navigateTo({
			url: '/pages/webview/webview?link=' + encodeURIComponent(useUrl) + "&encode=true"
		});
	}
	const paymentNext = () => {
		grantEquity({
			equityCode: info.value.type,
			payno: info.value.payno,
			phone: info.value.phone
		}).then((equity) => {
			editcx({
				equityCouponCode: equity.equityCouponCode,
				equityName: equity.equityName,
				useUrl: equity.useUrl,
				equityCode: equity.equityCode,
				thirdCode: equity.thirdCode
			}).then(() => {
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				});
				info.value.paystatus = 1
				setTimeout(() => {
					jumpWebView(equity.useUrl)
					payLoading.value = false
				}, 1000);
			}).catch(err => {
				payLoading.value = false
				uni.$u.toast("editcx调用失败")
			})
		}).catch(err => {
			payLoading.value = false
		})
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F8F8FA;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}


	.tips {
		color: #726F6F;
		font-size: 30rpx;
		margin-top: 38rpx;
		text-align: right;
	}

	.contant {
		background: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
	}

	.footer {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		left: 30rpx;
		right: 30rpx;
	}

	.submit {
		/* height: 80rpx; */
		padding: 20rpx;
		background: linear-gradient(180deg, #FF7F36 0%, #F54730 100%);
		text-align: center;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
</style>